<template>
  <div class="about">
    <input id="uploadFileTempSeat" type="file" hidden @change="afterFileSelected">
    <div style="height: 25px;text-align:left;display: flex;">
      <span style="line-height: 25px;">模板文档：</span>
      <input class="upload-file-name"
        style="width: 250px;height: 23px;border: 1px solid #333;outline: none;font-size: 12px;font-weight:400;border-radius: 5px;"
        :value="uploadFileName">
      <button @click="uploadFileToServer" style="margin-left: 5px;"><i class="iconfont icon-shangchuan"></i></button>
    </div>


    <div style="height: 25px;text-align:left;display: flex;margin-top: 10px;">
      <span style="line-height: 25px;font-weight:400;">检测文档：</span>
      <textarea class="upload-file-name"
        style="max-width: 800px;max-height: 350px;outline: none;font-size: 12px;width: 800px;height: 350px;"
        v-model="uploadFileNames" type="text"></textarea>

    </div>


    <div>
      <button class="bts" @click="begJian">检测</button>
    </div>

  </div>
</template>

<script>
import fs from 'fs'
import { ipcRenderer } from 'electron';

export default {
  data() {
    return {
      uploadFileName: '',
      uploadFileNames: '111',
      arr: [],
      arrs: [],
      maxData: [],
      count: 0
    }
  },
  mounted() {
    this.uploadFileName = localStorage.getItem('text')
  },
  methods: {
    uploadFileToServer: function () {
      const inputElement = document.getElementById('uploadFileTempSeat')
      inputElement.click()


    },
    uploadFileToServers: function () {
      const inputElement = document.getElementById('uploadFileTempSeats')
      inputElement.click()
    },
    // 模板文件上传
    afterFileSelected: function (event) {
      const file = event.target.files[0]
      this.uploadFileName = file.path
    },
    // 测试文件上传
    // afterFileSelecteds: function (event) {
    //   const file = event.target.files[0]
    //   this.uploadFileNames = file.path
    // },
    // 读取
    readDate() {
      try {
        this.arr = []
        const data = fs.readFileSync(`${this.uploadFileName}`, 'utf-8');
        const lines = data.split(/\r?\n/);
        lines.forEach((line) => {
          if (!line.match(/^\/\//)) {
            this.arr.push(`${line}`)
          } 
        });
      } catch (err) {
        console.error(err);
      }
    },
    readDates() {
      try {
        this.arrs = []
        const lines = this.uploadFileNames.split('\n');
        
        lines.forEach((line) => {
          if(line!=''){
             this.arrs.push(`${line.trim()}`)
          }
         
        });
      } catch (err) {
        console.error(err);
      }
    },
    // 检测
    begJian() {
      ipcRenderer.send('close-wtt')
      if (this.uploadFileName) {
        this.maxData = []
        this.readDate()
        this.readDates()
        
        for (let i = 0; i < this.arr.length; i++) {
          if (this.arr[i] !== this.arrs[i]) {
            this.maxData.push({ id: `${i + 1}`, one: `${this.arr[i]}`, two: `${this.arrs[i]}`,ote:'错误' })
            console.log(`出现不同的项,第${i + 1}行`, this.arr[i], this.arrs[i]);
          }
          if(this.arr[i] == this.arrs[i]){
            this.maxData.push({ id: `${i + 1}`, one: `${this.arr[i]}`, two: `${this.arrs[i]}`,ote:'正确' })
          }
        }
        setTimeout(() => {
          
          this.maxData = JSON.stringify(this.maxData)
          ipcRenderer.send('create-new',this.maxData)
        }, 1000)
      }else{
        alert('请选择文件')
      }



    }
  }
}

</script>

<style >
.about {
  width: 100%;
  height: 265px;
  box-sizing: border-box;
  padding: 15px;
}

.bts {
  display: block;
  margin: 370px auto;
  width: 55.11px;
  height: 25px;
  border-radius: 5px;
  font-size: 12px;
  color: #fff;
  background-color: #6C8FF8;
  border: 2px solid #6C8FF8;
}</style>